<!DOCTYPE html>
<!--引入th:*属性命名空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf 学习</title>
</head>
<style th:inline="css">
    .[[${cssclass}]] {
      text-align: [[${align}]];
    }
</style>
<body>
<!--第一部分：在作用域中获取数据-->
<!--${...}变量表达式-->
<!--获取存储在 Thymeleaf 上下文中或作为请求属性的变量。-->
<p th:text="'上下文中或作为请求属性：'+${teacher.name}">name</p>
<!--html5的获取方式：存储在 Thymeleaf 上下文中或作为请求属性的变量-->
<p data-th-text="'上下文中或作为请求属性：'+${teacher.name}">name</p>
<p>[[${teacher.name}]]</p>
<!--将返回一个会话作用域的属性-->
<p th:text="'会话作用域：'+${session.sessionTeacher.name}">name</p>
<!--${application.x}将返回一个名为的servlet 上下文属性X-->
<p th:text="'上下文属性：'+${application.applicationTeacher.name}">name</p>

<!--包含特殊字符th:text会被转译，无法再按HTML规范显示，th:utext则不会转译，返回的数据按照HTML规范显示-->
<p th:text="'被转译th--text：' +${welcome}"></p>
<p>内联表达式：被转译th--text：[[${welcome}]]</p>
<p th:utext="'不会转译th--utext：' +${welcome}"></p>
<p>内联表达式：不会转译th--utext：[(${welcome})]</p>
<p th:inline="none">禁用内联：A double array looks like this: [[1, 2, 3], [4, 5]]!</p>

<!--#表达式实用程序对象-->
<p>'#表达式实用程序对象:'[[${#strings.isEmpty(welcome)}]]</p>
<div th:object="${teacher}">
    <!--除了用‘’+‘’还可以用||拼接字符串-->
    <p th:text="|th:object配合选择表达式（星号语法）: *{name}|"></p>
</div>

<!--引入链接网址
页面相关： user/login.html
上下文相关：（/itemdetails?id=3服务器中的上下文名称将自动添加）
服务器相关：（~/billing/processInvoice允许在同一服务器中的另一个上下文（= 应用程序）中调用 URL。
协议相对 URL： //code.jquery.com/jquery-2.0.3.min.js
-->
<img th:src="@{/logo.png}">
<a th:href="@{//www.baidu.com}">图片链接</a>
<!--算术运算-->
<p th:text="'算术运算'+${teacher.students[0].age*2}"></p>
<!--小于&lt;和大于&gt;-->
<p th:text="'小于&-lt;和大于&-gt;'+${teacher.students[0].age &gt; 2}"></p>
<!--三目运算-->
<p th:text="${teacher.students[0].age &gt; 2}?'三目运算true':'三目运算false'"></p>
<p th:text="null?:'结果为空'"></p>
<p th:text="'${{}}转换为字符串：'+${{teacher.students[0].birthday}}"></p>
<!--给属性动态设置值-->
<img src="" th:attr="src=@{${logo}},title=${logoName},alt=${logoName}"/>
<input type="checkbox" name="active" th:checked="${1<2}"/>

<!--数据遍历-->
<table>
    <tr>
        <th>name</th>
        <th>age</th>
        <th>迭代器对象</th>
        <th>下标</th>
    </tr>
    <tr th:each="student,iterStat  : ${teacher.students}">
        <td th:text="${student.name}">Onions</td>
        <td th:text="${student.age}">2.41</td>
        <td th:text="${iterStat.index}">index</td>
        <td th:text="${iterStat}">index</td>
    </tr>
</table>
<!--if条件判断-->
<p th:if="${true}">if条件判断是否显示标签</p>
<p th:unless="${false}">th:unless条件判断是否显示标签</p>
<!--switch 语句-->
<div th:each="student : ${teacher.students}">
    <div th:switch="${student.age}">
        <p th:case="15">15岁</p>
        <p th:case="16">16岁</p>
    </div>
</div>
<!--引入head.html中的com_head代码块：th:replace  th:insert-->
<div th:insert="~{head :: com_head}"></div>
<!--引入head.html中的id_com_head代码块：th:replace  th:insert-->
<div th:insert="~{head :: #id_com_head}"></div>
<!--引入head.html中的param_com_head代码块并且传入参数：th:replace  th:insert-->
<div th:insert="~{head :: param_com_head(name=${teacher.name})}"></div>
<div>

</div>
</body>
<!--JavaScript 启用内联表达式：th:inline="javascript"-->
<script th:inline="javascript">
    console.log('内联表达式：'+[[${welcome}]]);
</script>
</html>
